<html>
    <head>
        <style type="text/css">
        
            #container{display: flex;flex-flow: row wrap;align-items: center;justify-content: space-between;}
            #first{width: 150px;height:120px;border-style:solid;border-color: red;}
             #second{width: 150px;height:100px;border-style:solid;border-color: red;}
              #third{width: 150px;height:40px;border-style:solid;border-color: red;}
               #forth{width: 150px;height:200px;border-style:solid;border-color: blue;}
               @media screen and (max-width:640px){
                    #container{display: flex;flex-flow: row wrap;justify-content: space-between;align-items: flex-start;}
                    #first{width: 150px;height:120px;border-style:solid;border-color: red;}
                    #second{width: 150px;height:100px;border-style:solid;border-color: red;}
                    #third{width: 150px;height:40px;border-style:solid;border-color: red;}
                    #forth{width: 150px;height:200px;border-style:solid;border-color: blue;order: -1;}
               }
        </style>
    </head>
    <body id="container">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
        <div id="forth">
        </div>
    </body>
</html>